<template>
  <!-- banner -->
  <div class="banner">
    <div class="ax-row">
      <span>关于大会</span>
    </div>
  </div>
  <div class="about_container">
    <!-- 背景图 -->
    <div class="bg1"></div>
    <div class="bg2"></div>
    <!-- 视频 文字 -->
    <div class="wonderful_view">
      <div class="introduction">
        <div class="video">
          <video
            id="video"
            poster="https://obs-xhlj.obs.cn-east-3.myhuaweicloud.com/2023/3/9a010a40075e4c048ed860bb4016e95f.jpg"
            muted
            loop
            src="https://img2023.gcsis.cn/2023/3/dd8d928e6e734c9592cb5833597564c6.mp4"
            autoplay
          ></video>
        </div>
        <div class="text">
          <span class="title">大会介绍</span>
          <span class="eng">About Conference</span>
          <!-- 这里div的嵌套是为了实现滚动条显示在左侧的效果 -->
          <div class="wrapper">
            <div class="scroller">
              <p class="txt">
                西湖论剑·网络安全大会自2012年创办，是国内首个已举办十周年的网络安全大会。十届以来，大会线下参会嘉宾累计超过10000人次，线上直播观看累计超过2500万人次，已成为国内网络安全领域的一张“金名片”。历届大会期间，国家部委、省市领导，院士、知名专家和优秀企业代表齐聚杭州，共商数字时代的安全之道。<br />

                2023年是全面贯彻落实党的二十大精神的开局之年，为深入学习贯彻党的二十大精神，推动落实《数字中国建设整体布局规划》尤其是筑牢数字安全屏障的要求，推进数字安全人才培养、科技创新、产业融合发展，以保障数字政务、数字经济、数字社会等数字化生态安全发展。在迎来大会十一年之际，由“西湖论剑·网络安全大会”升级为“西湖论剑·数字安全大会”，定于5月5日-8日在杭州举办。<br />

                本届大会主题为“数字安全@数字中国”，大会将邀请相关政府部门、科研院所，以及数字生态各领域的参与者、构建者、守护者，共同探讨数字中国的发展和安全之道。大会将设主论坛、数字安全成果展、多个平行论坛及研讨会，结合数字安全前沿技术、行业应用、人才培养、企业治理等议题展开讨论、展示成果。<br />
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="highlight wrap">
      <div class="section-header">
        <h2>大会亮点</h2>
        <p>Conference Highlight</p>
      </div>
      <!-- 数字跃动 -->
      <div class="number-animation wrap">
        <div v-for="item in highlightArray" class="num-item">
          <span class="number">
            <NumberAnimation
              ref="number1"
              :from="0"
              :to="item.num"
              :format="(num) => Number(num).toFixed(0)"
              :duration="3"
              autoplay
              easing="linear"
            />
            <span class="unit">{{ item.unit }}</span>
          </span>
          <span class="text">{{ item.text }}</span>
        </div>
      </div>
      <div class="highlight-main">
        <div class="highlight-item-right">
          <div class="highlight-info">
            <h2>议题更前沿</h2>
            <p>
              大会主题及议题、展览锚定数字中国建设要求，助力政企单位从政策、技术、人才、产业等各层面落实工作。
            </p>
            <button>查看详情</button>
          </div>
          <div class="highlight-img right1"></div>
        </div>
        <div class="highlight-item-left">
          <div class="highlight-info">
            <h2>线上更精彩</h2>
            <p>
              “掌上论剑”将进一步丰富内容，增强互动性、趣味性，线上持续精彩。
            </p>
            <button>查看详情</button>
          </div>
          <div class="highlight-img left1"></div>
        </div>
        <div class="highlight-item-right">
          <div class="highlight-info">
            <h2>成果更显著</h2>
            <p>
              将推出国内首份《2023中国数字安全能力洞察报告》，报告涵盖趋势、科技、人才、实践等多部分内容，引领行业发展方向。
            </p>
            <button>查看详情</button>
          </div>
          <div class="highlight-img right2"></div>
        </div>
        <div class="highlight-item-left" v-show="isShow">
          <div class="highlight-info">
            <h2>国际化更深入</h2>
            <p>
              峰会将通过引入国际组织、设置国际话题等，从全球角度研判数字化进程和趋势。
            </p>
          </div>
          <div class="highlight-img left2"></div>
        </div>
        <!-- .hidden -->
        <div class="collapse">
          <button class="show" @click="isShowItem()">{{ btnTxt }}</button>
        </div>
      </div>
    </div>
    <div class="previousReview wrap">
      <div class="section-header">
        <h2>往期回顾</h2>
        <p>Past Review</p>
      </div>
      <div class="swiper">
        <div class="container">
          <div class="block text-center">
            <el-carousel
              :interval="0"
              type="card"
              height="520px"
              indicator-position="none"
            >
              <el-carousel-item v-for="item in previousReviewArray" :key="item">
                <a :href="item.web" target="_blank">
                  <div class="img">
                    <img :src="item.img" :alt="item.title" />
                  </div>
                  <span class="title">
                    {{ item.title }}
                  </span>
                  <p class="text">
                    {{ item.txt }}
                  </p>
                </a>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script setup lang="ts" name="About">
import { ref } from "vue";

let highlightArray = [
  {
    num: 500,
    text: "主题演讲",
    unit: "+",
  },
  {
    num: 550,
    text: "合作伙伴",
    unit: "+",
  },
  {
    num: 10000,
    text: "与会嘉宾",
    unit: "+",
  },
  {
    num: 10,
    text: "行业从业者",
    unit: "万+",
  },
  {
    num: 2500,
    text: "直播观看",
    unit: "万+",
  },
];

let btnTxt = "展开";
const isShow = ref(false);
function isShowItem() {
  if (isShow.value === false) {
    btnTxt = "收起";
  } else {
    btnTxt = "展开";
  }
  isShow.value = !isShow.value;
}

let previousReviewArray = [
  {
    img: "src/assets/home/previousReview/2022.webp",
    title: "2022 构建安全可信的数字世界",
    txt: "2022年西湖论剑·网络安全大会由浙江省互联网信息办公室、 浙江省经济和信息化厅、浙江省公安厅、浙江省科学技术协会、浙江省工商业联合会、 浙江省通信管理局、杭州市人民政府主办，拟于2022年7月2日-3日召开，主题为“构建安全可信的数字世界”",
    web: "https://2022.gcsis.cn/",
  },
  {
    img: "src/assets/home/previousReview/2021.webp",
    title: "2021 安全:数字化改革之根本",
    txt: "2021年的西湖论剑大会于4月24日在杭州国际博览中心举办，本届大会主题为 “安全：数字化改革之根基”。届时，大会邀请相关主管部门领导、国内外知名专家学者、网络信息安全行业从业者们，共同解读中国网络信息安全产业政策、法规、行业标准等，厘清网络信息安全发展方向。",
    web: "https://2021.gcsis.cn/",
  },
  {
    img: "src/assets/home/previousReview/2020.webp",
    title: "2020 数治安全 智理未来",
    txt: "2020西湖论剑·网络安全线上峰会，主题为“数治安全 智理未来”。通过北京、杭州两地直播间同步连线直播的形式，聚焦后疫情时代的网络安全新业态、新模式，延续两会的热议话题，邀请政府主管部门领导、知名专家学者和网络安全专家“云聚集”，系统解读数字中国发展浪潮中的智慧城市安全、大数据安全、云安全、5G安全、工业互联网安全等多领域方向的最新成果，共推数字世界新时代。",
    web: "https://2020.gcsis.cn/",
  },
  {
    img: "src/assets/home/previousReview/2019.webp",
    title: "2019 安全：赋能数字新时代",
    txt: "2019年4月19日-21日在杭州国际博览中心隆重举行的主题为“安全：赋能数字新时代”的西湖论剑网络安全大会，邀请政府主管部门、知名专家学者和优秀企业家作为主讲嘉宾，系统解读政府在构建数字技术、数字经济、数字政府、数字社会等领域顶层设计，",
    web: "https://2020.gcsis.cn/review/2019/",
  },
  {
    img: "src/assets/home/previousReview/2018.webp",
    title: "2018 新时代 新安全 新力量",
    txt: "2018年4月27日，2018西湖论剑·网络安全大会在浙江杭州国际博览中心隆重召开，设置了主论坛和工业互联网信息安全、智慧城市信息安全、应急响应及威胁情报等8个分论坛。中国科学院院士、中国工程院院士、联合国犯罪和司法研究所技术与安全项目负责人、全球顶级网安企业代表、主管部门网络安全业务负责人等国内外知名专家学者和行业内优秀企业家围绕网络空间安全战略、关键信息基础设施保护、产业发展趋势、人才培养等领域进行了深度交流，",
    web: "https://2021.gcsis.cn/review/2018/index.html",
  },
  {
    img: "src/assets/home/previousReview/2017.webp",
    title: "2017 智引新安全 数领大未来",
    txt: "2017西湖论剑（中国网络安全创新分享大会）在世界互联网大会永久举办地桐乡乌镇举行。 2017西湖论剑由中央网信办网络安全协调局、公安部网络安全保卫局、国家信息中心、浙江省网信办、浙江省公安厅、浙江省经信委、浙江省科技厅、浙江省通管局联合指导，中国网络空间安全协会、中国信息产业商会信息安全产业分会主办，杭州安恒信息技术有限公司承办。",
    web: "https://2021.gcsis.cn/review/2017/index.html",
  },
  {
    img: "src/assets/home/previousReview/2016.webp",
    title: "2016 安若磐石，云之可栖",
    txt: "2016年10月16日下午，2016杭州·云栖大会火爆了4天之后，在杭州云栖小镇国际会展中心落下帷幕。本届大会是今年继G20杭州峰会之后，杭州举办的首个吸引全球科技人才的大会，也是在国内科技创新及互联网等领域有着极大影响力。",
    web: "https://2021.gcsis.cn/review/2016/index.html",
  },
];
</script>

<style scoped lang="scss">
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 5px solid transparent;
}

::-webkit-scrollbar-track {
  box-shadow: 1px 1px 3px rgba(255, 255, 255, 0.68) inset;
}

::-webkit-scrollbar-thumb {
  min-height: 20px;
  background-clip: content-box;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.799) inset;
}

::-webkit-scrollbar-corner {
  background: transparent;
}
.banner {
  width: 100%;
  height: 696px;
  display: flex;
  justify-content: center;
  background-image: url("@/assets/about_banner.jpg");
  background-repeat: no-repeat;
  background-size: 100% 696px;
  .ax-row {
    width: 1437px;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 48px;
    font-weight: bold;
    color: aliceblue;
    span {
      display: block;
      margin-top: 40px;
    }
  }
}
.about_container {
  position: relative;
  margin-top: 100px;
  .bg1 {
    position: absolute;
    width: 405px;
    height: 561px;
    top: 0;
    right: 0;
    background-image: url("@/assets/about_bg1.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 0;
  }
  .bg2 {
    position: absolute;
    width: 740px;
    height: 1200px;
    top: 500px;
    left: 0;
    background-image: url("@/assets/about_bg2.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 0;
  }
  .wonderful_view {
    width: 100%;
    height: 700px;
    display: flex;
    justify-content: center;
    font-size: 20px;
    .introduction {
      position: relative;
      width: 1437px;
      height: 616px;
      .video {
        position: absolute;
        left: 0;
        top: 0;
        width: 747px;
        height: 419px;
        background-color: rgb(216, 253, 199);
        z-index: 2;
        video {
          width: 100%;
          height: 100&;
        }
      }
      .text {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 804px;
        height: 472px;
        background-image: url("@/assets/about_2.jpg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        z-index: 1;
        color: #fff;
        .title {
          position: absolute;
          right: 0;
          top: 76px;
          width: 603px;
          height: 44px;
          display: block;
          font-size: 38px;
          font-weight: bold;
        }
        .eng {
          position: absolute;
          right: 0;
          top: 124px;
          width: 603px;
          height: 44px;
          display: block;
          font-size: 18px;
          font-weight: 500;
        }
        .wrapper {
          position: absolute;
          left: 180px;
          top: 200px;
          width: 513px;
          height: 200px;
          display: block;
          overflow: auto;
          direction: rtl;

          .scroller {
            .txt {
              right: 0;
              width: 490px;
              direction: ltr;
              font-size: 14px;
              line-height: 24px;
            }
          }
        }
      }
    }
  }
  .point {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: pink;
  }
}
.wrap {
  width: 1370px;
  margin: 0 auto;
  .section-header {
    margin-top: 30px;
    text-align: center;
    h2 {
      font-size: 36px;
      font-weight: bold;
      color: rgb(45, 177, 186);
    }
    p {
      font-size: 14px;
      margin-top: 16px;
      color: rgb(72, 187, 195);
    }
  }
}
.number-animation {
  display: flex;
  height: 100px;
  justify-content: space-between;
  padding: 100px 30px;
  .num-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    .text {
      display: block;
      color: #666;
      position: relative;
      padding-top: 5px;
    }
    .number {
      .unit {
        background: linear-gradient(-82deg, #2b76bc, #29d6dd);
        background-clip: text;
        font-size: 30px;
      }
    }
    /* .number::before {
        /* content: "+"; */
    /* position: absolute;
        background: linear-gradient(-82deg, #2b76bc, #29d6dd);
        background-clip: text;
        font-size: 30px;
        right: -16px;
        top: -10px;
      } */
  }
  .number {
    font-size: 70px;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
      "Microsoft YaHei", 微软雅黑, Arial, sans-serif;
    /* 文字渐变*/
    background: linear-gradient(-82deg, #2b76bc, #29d6dd);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.highlight-main {
  margin-top: 20px;
  .highlight-item-right {
    /* overflow: hidden; */
    position: relative;
    margin-left: 85px;
    width: 1370px;
    height: 275px;
    background: url(../assets/home/highlight/highlight1.jpg) no-repeat;
    display: flex;
    margin-top: 50px;
    .highlight-info {
      height: 275px;
      margin-right: 175px;
      position: relative;
      color: #fff;
      background-size: 100% 100%;
      padding-top: 36px;
      padding-left: 80px;
      z-index: 10;
      h2 {
        font-size: 36px;
        font-weight: bold;
      }
      p {
        margin: 20px 0;
        font-size: 16px;
        line-height: 32px;
        width: 650px;
      }
      button {
        display: block;
        height: 30px;
        padding: 0px 40px;
        border: #fff solid 1px;
        border-radius: 15px;
        background-color: rgb(255, 255, 255, 0);
        font-size: 14px;
        line-height: 28px;
        color: #fff;
      }
    }
    .highlight-img {
      position: absolute;
      width: 405px;
      height: 305px;
      right: -5px;
      clip-path: polygon(0% 0, 100% 0%, 100% 100%, 100% 300%);
      /* background: rgb(141, 193, 73); */
      /* z-index: 20; */
      top: -15px;
    }
    .right1 {
      background: url(../assets/home/highlight/highlight_right1.webp);
      background-size: 100% 100%;
    }
    .right2 {
      background: url(../assets/home/highlight/highlight_right2.webp);
      background-size: 100% 100%;
    }
    .highlight-img::before {
      content: "";
      display: block;
      position: absolute;
      /* z-index: 200; */
      top: 0px;
      left: 0px;
      width: 280px;
      height: 305px;
      background: transparent;
      /* 定点 */
      background-position: -1055px 43px;
      background-size: cover;

      z-index: 10;
    }
  }
  .highlight-item-left {
    /* overflow: hidden; */
    position: relative;
    margin-left: 200px;
    width: 1100px;
    height: 275px;
    background: url(../assets/home/highlight/highlight2.jpg) no-repeat;
    display: flex;
    margin-top: 50px;
    .highlight-info {
      height: 275px;
      left: 240px;
      position: absolute;
      color: #fff;
      background-size: 100% 100%;
      padding-top: 36px;
      padding-right: 80px;
      z-index: 10;
      h2 {
        font-size: 36px;
        font-weight: bold;
      }
      p {
        margin: 20px 0;
        font-size: 16px;
        line-height: 32px;
        width: 650px;
      }
      button {
        display: block;
        height: 30px;
        padding: 0px 40px;
        border: #fff solid 1px;
        border-radius: 15px;
        background-color: rgb(255, 255, 255, 0);
        font-size: 14px;
        line-height: 28px;
        color: #fff;
      }
    }
    .highlight-img {
      position: absolute;
      width: 435px;
      height: 305px;
      left: -220px;
      clip-path: polygon(0% 0%, 100% 0%, 70% 100%, 0% 100%);
      top: -15px;
    }
    .left1 {
      background: url(../assets/home/highlight/highlight_left1.webp);
      background-size: 100% 100%;
    }
    .left2 {
      background: url(../assets/home/highlight/highlight_left2.webp);
      background-size: 100% 100%;
    }
    .highlight-img::before {
      content: "";
      display: block;
      position: absolute;
      /* z-index: 200; */
      top: 0px;
      right: 0px;
      width: 280px;
      height: 305px;
      background: transparent;
      /* 定点 */
      background-position: -1055px 43px;
      background-size: cover;

      z-index: 10;
    }
  }
  .collapse {
    text-align: center;
    margin-top: 20px;
    .show {
      width: 200px;
      height: 40px;
      font-size: 14px;
      font-weight: 700;
      margin-top: 40px;
      padding: 5px 60px;
      border-radius: 40px;
      border: rgb(72, 187, 195) solid 1px;
      color: rgb(72, 187, 195);
      background-color: rgb(72, 187, 195, 0);
    }
  }
}
.previousReview {
  margin-top: -240px;
  padding-top: 330px;
  width: 100%;
  height: 1100px;
  background-image: url("@/assets/about_bg4.jpg");
  background-size: 100% 100%;
  .swiper {
    margin-top: 60px;
    height: 520px;
    position: relative;
    .container {
      margin: 0 auto;
      width: 1410px;
      height: 520px;
      position: relative;
      .el-carousel__item {
        height: 520px;
        background-color: #fff;
        text-align: center;
        .img {
          overflow: hidden;
          img {
            width: 100%;
            height: 300px;
            transition: all 0.25s;
            overflow: hidden;
          }
          img:hover {
            scale: (1.1);
          }
        }
        .title {
          display: inline-block;
          margin-top: 40px;
          font-size: 28px;
        }
        .text {
          color: #777;
          width: 480px;
          height: 84px;
          margin-top: 20px;
          line-height: 30px;
          overflow: hidden;
          display: inline-block;
        }
      }
    }
  }
}
</style>
